<template>
  <div>
    <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.value">
      </el-tab-pane>
    </el-tabs> -->
    <TabChange v-model="activeName" :list="tabList" filter-key="label" filter-value="value" @tab-click="handleClick"></TabChange>
    <aplid-base-crud :key="key"  ref="crud" class="w-100" v-bind="baseConfig" :paramsObj="paramsObj"></aplid-base-crud>
  </div>
</template>

<script setup lang="ts">
import TabChange from '@/views/aplid/TabChange/index.vue'
type Props = {
  isWithAuth?:any
}
let props = withDefaults(defineProps<Props>(),{
  isWithAuth:undefined
})
import { detailConfig } from '@/views/datacenter/business/serviceOrder/config'
import apiMod from '@/apiMod/index'
import { getAreaObj} from '@/utils/util'
const baseConfig = {
  pageName: '社区居家服务工单',
  dictcodes: [
    'ELDERLY_TYPE',
    'ACCESS_LEVEL_COUNTRY',
    'SERVICE_ITEM_TYPE',
    'SERVICE_METHOD',
    'BUSINESS_TYPE',
    'RETURN_VISIT_STATUS',
    'RETURN_VISIT_RESULT',
  ],
  rowKey: 'id',
  api: {
    index: 'view_dpCommunityServiceOrder_page',
  },
  auth: {
    index: 'view_dpCommunityServiceOrder_page',
  },
  menuBtn: [
    {
      icon: 'detail',
      label: '查看详情',
      type: 'primary',
      operate: 'detail',
      auth: 'view_dpCommunityServiceOrder_page',
      text: true,
      show: true,
    },
  ],
  detailConfig,
  dialogConfig: {
    width: '90%'
  },
  tableConfig: {
    stripe: true,
    border: false,
    tableLayout: 'auto',
    columns: [
      { label: '服务类别', prop: 'clientTypeLabel' },
      { label: '证件号码', prop: 'idCard' },
      { label: '服务对象', prop: 'name' },
      { label: '联系方式', prop: 'contactNo' },
      {
        label: '服务地区',
        prop: 'areas_name',
      },
      {
        label: '服务人员',
        prop: 'serviceStaff',
      },
      {
        label: '服务项目',
        prop: 'serviceItemLabel',
      },
      {
        label: '服务组织',
        prop: 'orgName',
      },
      {
        label: '服务组织统一社会信用代码',
        prop: 'creditCode',
      },
      {
        label: '服务时间',
        prop: 'startTime',
      },
      {
        label: '操作',
        prop: 'menu',
        width: 200,
        fixed: 'right',
      },
    ],
  },
  	onLoadFormate: async (arr) => {
    console.log('到达2')
    const tableData = arr.map((item) => {
      const areas_name = getAreaObj(item, '')
      return {
        ...item,
        areas_name,
      }
    })
    console.log(tableData, 'tableData')
    return Promise.resolve(Object.freeze(tableData))
  },
}
let key = ref(1)
let tabList: any = ref([
  { label: '全部', value: undefined }
])
let activeName = ref(undefined)
let paramsObj = ref({
  businessType: activeName.value,
  isWithAuth:props.isWithAuth
})
const handleClick = (e) => {
  if (e.value == 0) {
    paramsObj.value['businessType'] = undefined
  }else{
    paramsObj.value = {
      businessType: e.value,
      isWithAuth:props.isWithAuth
    }
  }
  
  key.value = Math.random()
}
// 获取业务类型字典，然后渲染tab
const getInitData = () => {
  apiMod.getDictItemList(['BUSINESS_TYPE']).then(res => {
    tabList.value = [...tabList.value, ...res.data['BUSINESS_TYPE']]
  })
}
getInitData()
</script>

<style scoped></style>
